<template>
  <div class="login">
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder logo">
          <svg-icon class="merchant" icon-class="tiepaigongsiLOGOyuanwenjian--6"></svg-icon>
        </div>
      </div>
    </div>
    <vue-form :state="formstate" ref="form" @submit.stop.prevent="handleClickSubmit">
      <validate tag="div" class="weui-cell_item" :custom="{ 'validUser': validUser }">
        <div class="weui-cell">
          <svg-icon class="merchant" icon-class="touxiang" width="13px" height="15px"></svg-icon>
          <div class="weui-cell__bd">
            <input class="weui-input" name="username" type="text" required v-model="login.username" placeholder="请输入用户名"/>
          </div>
        </div>
        <field-messages name="username" show="$touched">
          <div slot="required" class="err">登录名必须填写哦~</div>
          <div slot="validUser" class="err">登录名格式不对哦~</div>
        </field-messages>
      </validate>
      <validate tag="div" class="weui-cell_item">
        <div class="weui-cell">
          <svg-icon class="merchant" icon-class="mima" width="13px" height="15px"></svg-icon>
          <div class="weui-cell__bd">
            <input class="weui-input" type="password" name="password" required minlength="6" maxlength="25" v-model="login.pwd" placeholder="请输入密码"/>
          </div>
        </div>
        <field-messages name="password" show="$touched">
          <div class="err" slot="required">密码必须填写~</div>
          <div class="err" slot="minlength">密码位数不对~</div>
          <div class="err" slot="maxlength">密码位数不对~</div>
        </field-messages>
      </validate>
      <div class="weui-cell_item pt20">
        <button type="submit" class="weui-btn weui-btn_primary" @touchstart.stop.prevent="handleClickSubmit">登录</button>
      </div>
    </vue-form>
    <div class="weui-footer weui-footer_fixed-bottom">
      <p class="weui-footer__links">
          <a href="javascript:void(0);" class="weui-footer__link">山西微特汇信息科技有限公司</a>
      </p>
      <p class="weui-footer__text">Copyright &copy; 2018, wtehui.com</p>
    </div>
  </div>
</template>

<script>
import { validatePhone } from '@/utils/validate'
export default {
  data() {
    return {
      formstate: {},
      login: {
        username: '',
        pwd: ''
      }
    }
  },
  methods: {
    handleClickSubmit(e) {
      e.preventDefault();
      if (!this.formstate.$invalid) {
        this.$store.dispatch('LoginByUsername', this.login).then(res => {
          if(res === 0) {
            this.$toast.success('登录成功')
            this.$router.push({ name: 'saleman' })
          }
        })
      } else {
        this.$weui.alert('请输入用户名或密码')
        return false
      }
    },
    validUser(v) {
      if (validatePhone(v)) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../styles/index';
  .login {
    padding:  px2rem(70px) px2rem(75px);
    padding-top: 0;
    .weui-cell_item {
      padding-bottom: px2rem(40px);
    }
    .logo svg use{
      height: px2rem(200px);
    }
    .weui-footer {
      @media (max-height:400px) {
        display: none
      }
    }
    .weui-btn {
      font-size: px2rem(36px);
    }
    .weui-cell svg {
      fill: #2E495C;
    }
    .weui-cell__bd {
      padding-left: 10px;
    }
  }
</style>

